
<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="<%=basePath %>">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客户管理</title>
    <link rel="stylesheet" href="/resources/lib/layui-v2.6.3/css/layui.css">
    <script type="text/javascript" src="/resources/lib/layui-v2.6.3/layui.js"></script>

    <script type="text/html" id="topToolbar">
        <div class="layui-btn-group">
            <button lay-event="addOne" class="layui-btn layui-btn-checked"><i class="layui-icon layui-icon-add-1"/>添加
            </button>
            <button lay-event="changeUser" class="layui-btn " id="changeUserBtn">转移客户
            </button>


        </div>
    </script>

    <script type="text/html" id="rowToolbar">
        <div class="layui-btn-group">
            <button lay-event="update" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-edit"/>修改
            </button>
            <button lay-event="del" class="layui-btn layui-btn-danger"><i class="layui-icon layui-icon-delete"/>删除
            </button>
            <button lay-event="viewVistiLog" class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-delete"/>查看拜访记录
            </button>


        </div>
    </script>
    <script type="text/javascript">
        layui.use(['table', 'layer', 'laydate', 'jquery', 'laydate'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let layer = layui.layer;
            let form = layui.form;
            //layui时间组件
            let laydate = layui.laydate;

            //请求查询条件里的业务员
            //请求查询条件里面的业务员
            $.get("/user/queryAllAvailableUser.do", function (res) {
                let data = res.data;
                if (data) {
                    let html = '<option value="">请选择业务员</option>';
                    $.each(data, function (i, item) {
                        //业务员id
                        html += '<option value="' + item.id + '">' + item.realname + '</option>';
                    })
                    //放到searchUserId
                    $("#searchUserId").html(html)
                    //  console.log($("#searchUserId").html())
                    //重新渲染页面所有下拉框
                    //渲染下拉列表  开关，下拉列表，单选按钮等比较特殊都需要渲染 具体看ssm项目12客户管理第56分
                    form.render('select')
                }
            })

            //渲染数据表格
            let customerTable = table.render({
                elem: "#scoresTable",
                cols: [ [
                    {field: 'aaa', type: "checkbox"},
                    {field: 'bbb', title: '序号', width: 80, type: "numbers"},
                    {field: 'id', title: '客户ID', width: 80},
                    {field: 'name', title: '客户名称', width: 100},
                    {field: 'phone', title: '客户电话', width: 100},
                    {
                        field: 'sex', title: '客户性别', width: 100, templet: function (res) {
                            //res.后面接字段名
                            if (res.sex == 1) {
                                return "<font color='blue'>男</font>"
                            } else if (res.sex == 2) {
                                return "<font color='green'>女</font>"
                            }
                            return '未知角色'
                        }
                    },
                    {
                        field: 'company', title: '客户公司', width: 100,
                    },
                    {field: 'userId', title: '业务员ID', width: 150},
                    {field: 'realname', title: '所属业务员', width: 150},
                    {field: 'createTime', title: '创建时间', width: 100},
                    {field: 'updateTime', title: '更新时间', width: 100},
                    {field: 'deleteTime', title: '删除时间', width: 100},
                    {field: 'eee', title: '操作', width: 300, toolbar: "#rowToolbar"},
                ] ],
                url: "/customer/list.do",
                page: true,
                limit: 2,
                limits: [2, 4, 6],
                toolbar: "#topToolbar",
                done:function (){
                    //判断用户角色
                    let role  =[[${session.user.role}]];
                    if(role==2){//业务员
                        //要两个一起配合使用一个为script中某个button按钮id
                        //一个为引用的表单转移客户弹出层某个div id值
                        $("#userIdSearch").hide()
                        console.log($("#changeUserBtn").length)
                        $("#changeUserBtn").hide();
                    }

                }
            })
            //from监听模糊查询
            // 表单事件
            //给提交按钮添加提交事件  lay-filter值为按钮的lay-filter值
            form.on("submit(submitfilter)", function (obj) {
                let data = obj.field;
                window.confirm(JSON.stringify(data))
                customerTable.reload({
                    where: data
                })
                return false;
            });

            //监听表头的事件
            table.on("toolbar(customerTable)", function (obj) {
                console.log(obj);
                switch (obj.event) {
                    case 'addOne':
                        openAddLayer();//打开添加的弹出层
                        break;
                    case 'changeUser':
                        // window.confirm("changeUser")
                        openChangeUserLayer();
                        break;
                }
            });
            //监听行工具条的事件
            table.on('tool(customerTable)', function (obj) {
                switch (obj.event) {
                    case 'update':
                        openUpdateLayer(obj.data)
                        break;
                    case 'del':
                        layer.confirm("您确定要删除要让【" + obj.data.name + "】这个客户吗？", {icon: 3, title: '提示'}, function () {
                            $.post("/customer/del.do", {id: obj.data.id}, function (res) {
                                layer.msg(res.msg);
                                if (res.code == 200) {
                                    //刷新表格
                                    customerTable.reload();
                                }
                            })
                        })

                        break;
                    case 'viewVistiLog':
                        //查看拜访记录
                        //data为该行单条记录
                        openViewVisitLog(obj.data);

                        break;
                }
            });


            //打开添加的弹出层的方法
            let url; //提交的URL
            let mainIndex; //当前弹出层的index
            function openAddLayer() {
                mainIndex = layer.open({
                    type: 1,//页面层
                    title: '新建客户档案',
                    content: $("#addOrUpdateForm"),
                    area: ['400px', '300px'],
                    success: function () {
                        // 当你需要在层创建完毕时即执行一些语句
                        //因为共用同一个表单
                        $("#doReset").click();
                        url = "/customer/addCustomer.do";
                    }
                })
            }

            //打开修改的弹出层的方法
            function openUpdateLayer(data) {
                mainIndex = layer.open({
                    type: 1,//页面层
                    title: '修改[' + data.name + ']客户信息',
                    content: $("#addOrUpdateForm"),
                    area: ['400px', '300px'],
                    success: function () {
                        //回显数据
                        form.val('dataFrm', data);
                        url = "/customer/updatecustomer.do";
                    }
                })
            }

            //打开转移弹出层
            function openChangeUserLayer() {
                //得到表格中选中行的数据  老师选的为lay-filter值  不行换一下，老师的id与lay-filter值一样
                let checkStatus = table.checkStatus('scoresTable')//idTest  及为基础参数 id  对应的值
                let data = checkStatus.data;
                if (data.length <= 0) {

                    layer.msg("请选中要转移的数据")
                    return;
                }
                mainIndex = layer.open({
                    type: 1,//页面层
                    title: '选中要转移的客户数据',
                    content: $("#changeCustomeUserForm"),
                    area: ['400px', '300px'],
                    success: function () {
                        //请求查询条件里的业务员
                        //请求查询条件里面的业务员
                        $.get("/user/queryAllAvailableUser.do", function (res) {
                            let data = res.data;
                            if (data) {
                                let html = '';
                                $.each(data, function (i, item) {
                                    //业务员id
                                    html += '<input type="radio"   name="userId" value="' + item.id + '"title="' + item.realname + '"/>';
                                })
                                //放到searchUserId
                                $("#userRadioD").html(html)
                                //  console.log($("#userRadioD").html())
                                //重新渲染页面所有下拉框
                                //渲染下拉列表  开关，下拉列表，单选按钮等比较特殊都需要渲染 具体看ssm项目12客户管理第56分
                                form.render('radio')
                            }
                        })

                    }
                })

            }

            //打开查看拜访记录弹出层出层
            function openViewVisitLog(data) {
                //该data为表格单行数据
                mainIndex = layer.open({
                    type: 1,//页面层
                    title: '添加【' + data.name + '】客户的拜访记录',
                    content: $("#customerVisitLogDiv"),
                    area: ['800px', '600px'],
                    success: function () {
                        //绑定时间选择器
                        laydate.render({
                            //elem为该input标签的id值
                            elem: "#visitTime",
                            type: "datetime"
                        })
                        //渲染拜访数表格，根据客户id分页查询数据
                        let visitLogTable = table.render({
                            elem: "#visitLogTable",
                            url: '/visitLog/listVisitLogByCustomerId.do?customerId=' + data.id,
                            cols: [ [
                                {field: 'aaa', type: "checkbox"},
                                {field: 'bbb', title: '序号', width: 80, type: "numbers"},
                                {field: 'realname', title: '业务员姓名', width: 80},
                                {field: 'name', title: '客户名称', width: 100},
                                {field: 'descp', title: '拜访记录', width: 100},
                                {field: 'visitTime', title: '拜访时间', width: 100},
                                {field: 'createTime', title: '创建时间', width: 100},
                            ] ],
                            page: true,
                            limit: 2,
                            limits: [2, 4, 6],

                        })
                        //监听提交事件也就是弹出层引用的同一个表单
                        form.on("submit(doVisitLogSubmit)", function (obj) {
                            let params = obj.field;//json对象{"visitTime":'2020-11-11 11:11:11',"descp":"123412312"};
                            //向params里面添加客户id与客户名称属性
                            params.customerId = data.id;
                            params.name = data.name;
                            console.log(params)

                            $.post("/visitLog/addVisitLog.do", params, function (res) {
                                layer.msg(res.msg);
                                if (res.code == 200) {
                                    //刷新拜访记录表格
                                    visitLogTable.reload();
                                    //清空表单
                                    $("#visitLogFrm")[0].reset();//把jq对象转dom对象，并清空表单

                                }
                            })
                            //阻止表单提交
                            return false;
                        })

                    }
                })
            }


//监听转移客户弹出层里面的提交按钮
            form.on("submit(doChange)", function (obj) {
                let userId = obj.field.userId;
                if (userId) {
                    //提交
                    //得到表格中选中行的数据  老师选的为lay-filter值  不行换一下，老师的id与lay-filter值一样
                    let checkStatus = table.checkStatus('scoresTable')//idTest  及为基础参数 id  对应的值
                    let data = checkStatus.data;
//生明一个提交到后台的数据对象  user?userId=1&customerId=2&customerId=3
                    let params = "userId=" + userId
                    $.each(data, function (index, item) {
                        params += "&customerIds=" + item.id;
                    })
                    console.log(params)

                    $.post("/customer/changeCustomerUser.do", params, function (res) {
                        layer.msg(res.msg);
                        if (res.code == 200) {
                            //刷新表格
                            customerTable.reload();
                            //关闭弹出层
                            layer.close(mainIndex);
                        }
                    })
                } else {
                    layer.msg("请选择一个要转移的业务员")
                }

                return false;
            })

            //监听提交事件也就是弹出层引用的同一个表单
            form.on("submit(doSubmit)", function (obj) {
                let data = obj.field;
                //提交
                $.post(url, data, function (res) {
                    layer.msg(res.msg);
                    if (res.code == 200) {
                        //刷新表格
                        // customerTable.render()
                         customerTable.reload();
                        //关闭弹出层
                        layer.close(mainIndex);
                    }
                })
                return false;
            })
        })


    </script>
</head>
<body>
<!--<%&#45;&#45;数据表格上方的表单&#45;&#45;%>-->
<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">登录名</label>
            <div class="layui-input-inline">
                <select name="userId" id="searchUserId">

                </select>
            </div>
            <label class="layui-form-label">
                客户姓名
            </label>
            <div class="layui-input-inline">
                <input type="text" name="name" class="layui-input">
            </div>
            <label class="layui-form-label">
                客户电话
            </label>
            <div class="layui-input-inline ">
                <input type="text" name="phone" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button lay-filter="submitfilter" class="layui-btn " lay-submit><i class="layui-icon layui-btn-ok"></i>查询
                </button>
                <button type="reset" class="layui-btn layui-btn-danger"><i class="layui-icon layui-btn-close"></i>重置
                </button>
            </div>
        </div>
    </form>
</blockquote>

<table id="scoresTable" lay-filter="customerTable">

</table>

<!-- 弹出层开始 -->
<div id="addOrUpdateForm" style="display: none;margin: 5px">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">客户姓名</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="name" lay-verify="required" placeholder="请输入客户姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" lay-verify="required" placeholder="请输入客户电话" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户公司</label>
            <div class="layui-input-block">
                <input type="text" name="company" lay-verify="required" placeholder="请输入真实名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <input type="radio" name="sex" checked value="1" title="男">
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="button" value="提交" class="layui-btn" lay-submit id="doSubmit" lay-filter="doSubmit">
            <input type="reset" value="重置" id="doReset" class="layui-btn layui-btn-danger">
        </div>
    </form>
</div>
<!-- 弹出层结束-->

<!--<%&#45;&#45;转移客户弹出层开始&#45;&#45;%>-->
<div id="changeCustomeUserForm" style="display: none;margin: 5px">
    <form class="layui-form" id="changeFrm" lay-filter="changerUserFrm">
        <div class="layui-form-item">
<!--<%&#45;&#45;            对这个有点懵，回头问问别人&#45;&#45;%>-->
            <div class="layui-inline" id="userIdSearch">
                <label class="layui-form-label" style="width: 100px">请选择业务员</label>
                <div class="layui-input-block" id="userRadioD">
                </div>
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <input type="button" value="确定" class="layui-btn" lay-submit id="doChange" lay-filter="doChange">
        </div>
    </form>
</div>
<!--<%&#45;&#45;转移客户弹出层结束&#45;&#45;%>-->
<!--<%&#45;&#45;客户拜访记录弹出层开始&#45;&#45;%>-->

<div id="customerVisitLogDiv" style="display: none;margin: 5px">
<!--    <%&#45;&#45;    加一个卡片格式&#45;&#45;%>-->
    <div class="layui-panel" style="padding: 2px">
        <form class="layui-form" id="visitLogFrm" lay-filter="visitLogFrm">
            <div class="layui-form-item">
                <label class="layui-form-label">拜访时间</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" lay-verify="required" readonly id="visitTime"
                           name="visitTime" placeholder="请选择拜访时间">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">拜访内容</label>
                <div class="layui-input-block">
<!--                    <%&#45;&#45;                    文本域内容要记住&#45;&#45;%>-->
                    <textarea class="layui-textarea" lay-verify="required" name="descp"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="text-align: center">
                <input type="button" value="保存" class="layui-btn" lay-submit id="doVisitLogSubmit"
                       lay-filter="doVisitLogSubmit">
            </div>
        </form>
    </div>
<!--      <div class="layui-panel">样式为卡片格式的意思   -->
    <div class="layui-panel">
<!--        <%&#45;&#45;        layui-hide是隐藏   &#45;&#45;%>-->
        <table class="layui-hide" id="visitLogTable" lay-filter="visitLogTable"></table>
    </div>
</div>
<!--<%&#45;&#45;客户拜访记录弹出层结束&#45;&#45;%>-->

</body>
</html>
